ARIA: Rolle der Menuleiste

Eine menubar ist eine Darstellung eines menu, das normalerweise sichtbar bleibt und normalerweise horizontal präsentiert wird.

Beschreibung

Ein Menü ist ein Widget, das dem Benutzer eine Liste von Auswahlmöglichkeiten bietet, wie z.B. eine Reihe von Aktionen oder Funktionen. Die Menuleistentypen von Menüs werden normalerweise als dauerhaft sichtbare horizontale Leiste mit Befehlen präsentiert. Menuleisten verhalten sich ähnlich wie native Betriebssystem-Menuleisten, wie z.B. Menuleisten mit Dropdown-Menüs, die häufig oben in vielen Desktop-Anwendungsfenstern zu finden sind.

Die menubar-Rolle wird verwendet, um eine Menüleiste zu erstellen, die ähnlich wie die in vielen Desktop-Anwendungen nahe der Oberseite des Fensters zu finden ist, optisch persistent ist, typischerweise horizontal, und dem Benutzer schnellen Zugriff auf eine konsistente Reihe von Befehlen bietet.

Eine menubar enthält drei Arten von Menüpunkten, einschließlich menuitem, menuitemradio und menuitemcheckbox. Diese Menüpunkte können optional in einem oder mehreren group-Container verschachtelt sein. Gruppen oder Elemente können optional mit separator-Elementen getrennt werden. Während jeder Menüpunkt fokussierbar sein muss, selbst wenn er deaktiviert ist, sind die group- und separator-Elemente nicht fokussierbar.

Ein Beispiel für eine native Menuleiste ist die Leiste, die möglicherweise oben auf dem Bildschirm vorhanden ist, wenn Sie dies in einem Desktop-Browser lesen. Ein Beispiel für eine webbasierte Menuleiste ist die horizontale Menüleiste, die "Datei Bearbeiten Ansicht Einfügen Format" usw. liest, die gewöhnlich unter dem Dokumentnamen in einem Google-Dokument sichtbar ist.

Menuleisten-Interaktionen sollten der typischen Menuleisten-Interaktion in einer Desktop-Grafikoberfläche ähnlich sein. In Google Docs ist jeder dieser Menüpunkte ein menuitem mit einem Popup-Untermenü, sodass jeder das aria-haspopup-Attribut auf true gesetzt hat. Das menubar-Element selbst nicht.

Die Menuleiste und alle Menüpunkte sind fokussierbar und haben ein tabindex-Attribut gesetzt. Wenn die Menuleiste durch Tabbing fokussiert wird, wird der Tastaturfokus auf den ersten Menüpunkt gesetzt. Jeder Punkt im Menü hat tabindex auf -1 gesetzt, außer der erste Punkt, der tabindex auf 0 gesetzt hat.

Wenn eine Menuleiste durch eine Kontextaktion, wie z.B. eine Tastenkombination, fokussiert wird, kann Escape oder Enter den Fokus auf den aufrufenden Kontext zurückbringen. Achten Sie darauf, keine Tastenkombinationen zu erstellen, die mit Benutzeragenten-, Betriebssystem- oder unterstützenden Technologie-Kurzbefehlen interferieren - jeder UA, OS oder AT.

Jeder Menüpunkt, egal wie tief verschachtelt, ist fokussierbar, selbst wenn er deaktiviert ist.

Wenn eine menubar ein sichtbares Label hat, fügen Sie aria-labelledby hinzu, das auf einen Wert setzt, der auf das beschriftende Element verweist. Andernfalls geben Sie der Menuleiste einen zugänglichen Namen, indem Sie ein beschreibendes aria-label hinzufügen.

Ein menuitem-Element in der menubar kann ein Untermenü mit Menüpunkten beinhalten. Untermenüs können mehrere Ebenen tief verschachtelt werden. Im Allgemeinen ist die äußere menubar horizontal und alle Untermenüs sind vertikal. Wenn dies nicht der Fall ist, und Ihre Menuleiste vertikal ist, fügen Sie aria-orientation="vertical" dem menubar-Element hinzu. Andernfalls ist dieses Attribut nicht notwendig, da der Standardwert horizontal ist.

Zugehörige WAI-ARIA-Rollen, -Zustände und -Eigenschaften

group Rolle

Identifiziert eine Gruppe von Menüelementen

Eine Option in einer Reihe von Auswahlmöglichkeiten, die von einer menubar enthalten werden. Kann ein Untermenü haben.

Ein auswählbares Menüelement in einer Gruppe von Elementen mit derselben Rolle, von denen nur eines gleichzeitig ausgewählt werden kann.

Ein Menüelement mit einem auswählbaren Zustand, dessen mögliche Werte true, false oder mixed sind.

aria-orientation

Fügen Sie aria-orientation="vertical" dem menubar-Element hinzu, wenn es vertikal ist. Die Standardausrichtung ist horizontal.

Tastatur-Interaktionen

Wenn der Fokus in einer menubar liegt, befindet er sich immer auf einem Menüelement innerhalb der Leiste. Wenn der Fokus auf einem obersten menuitem in einer Menuleiste liegt, müssen die folgenden Tastaturinteraktionen unterstützt werden:

Pfeiltaste nach unten

Öffnet das Untermenü, wenn das derzeit fokussierte menuitem ein solches hat, und setzt den Fokus auf das erste Element im Untermenü.

Pfeiltaste nach oben

(Optional) Öffnet das Untermenü, wenn das derzeit fokussierte menuitem ein solches hat, und setzt den Fokus auf das letzte Element im Untermenü.

Pfeiltaste nach rechts

Verschiebt den Fokus zum nächsten Element, optional vom letzten zum ersten Element wiederholend.

Verschiebt den Fokus zum vorherigen Element, optional vom ersten zum letzten Element wiederholend.

Home

Wenn eine Pfeiltasten-Wiederholung nicht unterstützt wird, verschiebt den Fokus zum ersten Element in der menubar.

Ende

Wenn eine Pfeiltasten-Wiederholung nicht unterstützt wird, verschiebt den Fokus zum letzten Element in der menubar.

Tab

Verschiebt den Fokus zum nächsten Element in der Tab-Reihenfolge. Wenn dies die Menuleiste verlässt, werden alle Untermenüs in der Menuleiste geschlossen.

Shift + Tab

Verschiebt den Fokus zum vorherigen Element in der Tab-Reihenfolge. Wenn dies die Menuleiste verlässt, werden alle Untermenüs in der Menuleiste geschlossen.

Siehe menuitem Tastatur-Interaktionen, menuitemradio Tastatur-Interaktionen und menuitemcheckbox Tastatur-Interaktionen für weitere Informationen zu Tastaturinteraktionen, wenn der Fokus auf einem Menüelement in einer Menuleiste liegt (was er immer ist).

Hinweis: Die obigen Interaktionen setzen voraus, dass die menubar horizontal ist. Wenn die menubar vertikal ist, fügen Sie aria-orientation="vertical" hinzu und ändern Sie die folgenden Tastaturbefehle entsprechend:

Pfeiltaste nach unten

Funktioniert wie die Pfeiltaste nach rechts, wie oben beschrieben.

Pfeiltaste nach oben

Funktioniert wie die Pfeiltaste nach links, wie oben beschrieben.

Pfeiltaste nach rechts

Funktioniert wie die Pfeiltaste nach unten, wie oben beschrieben.

Funktioniert wie die Pfeiltaste nach oben, wie oben beschrieben.

Beispiele

Spezifikationen

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# menubar
Unknown specification

Siehe auch